<template>
	<view class="container">
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<view v-if="isLogin"  style="display: flex;flex-direction: row;">
				<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
				<view class="user-info">
					<view class="phone">{{phone}}</view>
					<view class="userlevel">
						<view class="texts"> 注册用户 </view>
					</view>
				</view>
			</view>
			<view @click="login" v-if="!isLogin" style="display: flex;flex-direction: row;">
				<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
				<view class="user-info">
				<view class="phone">点击登录</view>
				</view>
			</view>
			<view class="logout" v-if="isLogin" @click="handleLogout">安全退出</view>
		</view>
		<!-- 提示条 -->
		<view class="notice-bar" v-if="isLogin">
		  <text class="notice-text">请登录PC完善资料，参加考试</text>
		</view>
		
		<!-- 菜单列表 -->
		<view class="menu-list">
			<view class="menu-item" @click="myclass()" >
				<image src="/static/wdkc.png" class="left-icon" mode=""></image>
				<view class="menu-text">我的课程</view>
				<image src="/static/rights.png" class="rights" mode=""></image>
			</view>
			<view class="menu-item" @click="tiku()" >
				<image src="/static/tiku.png" class="left-icon" mode=""></image>
				<view class="menu-text">我的题库</view>
				<image src="/static/rights.png" class="rights" mode=""></image>
			</view>
			<view class="menu-item" @click="connectus()">
				<image src="/static/lxwm.png" class="left-icon" mode=""></image>
				<view class="menu-text">联系我们</view>
				<image src="/static/rights.png" class="rights" mode=""></image>
			</view>
			<view class="menu-item" @click="aboutus">
				<image src="/static/gywm.png" class="left-icon" mode=""></image>
				<view class="menu-text">关于我们</view>
				<image src="/static/rights.png" class="rights" mode=""></image>
			</view>
			<view class="menu-item">
				<image src="/static/zx.png" class="left-icon" mode=""></image>
				<view class="menu-text">注销</view>
				<image src="/static/rights.png" class="rights" mode=""></image>
			</view>
		</view>
		 <!-- 底部协议 -->
		<view class="footer">
			<text @click="userxieyi">《京师万学用户协议》</text>
			<text class="divider">|</text>
			<text @click="xieyi">《隐私协议》</text>
		</view>
		
		<!--客服-->
		<view class="kfview" v-if="connectShow">
			<view class="modal"> </view>
			<view class="kfs">
				<view class="kftitle"> 请扫码联系客服~~ </view>
				<view class="kf-qrcode">
					<image :src="kfInfo.wechat" mode=""></image>
				</view>
				<view class="kftel">
					<view class="jw">
						教务：{{kfInfo.jw}}
					</view>
					<view class="ts">
						投诉：{{kfInfo.ts}}
					</view>
				</view>
				<view class="times">{{kfInfo.text}}</view>
			</view>
			<view class="kfclose">
				<image src="/static/close.png"  @click="connectus()" mode=""></image>
			</view>
		</view>
	</view>
	<!--自定义TabBar-->
	<uv-tabbar :value="value" :fixed="true" @change="index=>value = index" activeColor="#F56822">
		<view class="tabbars">
			<uv-tabbar-item text="在线好课" @click="tabbarClick(1)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/index-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/index.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的课程" @click="tabbarClick(2)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/class-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/class.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="汉语动态" @click="tabbarClick(3)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/chinese-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/chinese.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="个人中心" @click="tabbarClick(4)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/user-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/user.png"></image>
				</template>
			</uv-tabbar-item>
		</view>
	</uv-tabbar>
</template>

<script>
export default {
	data() {
		return {
			connectShow: false,
			isLogin: false,
			phone: '',
			baseURL: getApp().globalData.baseUrl,
			kfInfo: {
				'jw': '',
				'ts': '',
				'wechat' : '',
				'text' : ''
			},
			value: 3
		}
	},
	onShow(){
		this.isLogin = uni.getStorageSync('isLogin')
		this.phone  = uni.getStorageSync('phone')
		this.kfInfos()
	},
	methods: {
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.isLogin = false
						uni.setStorageSync('isLogin',false)
						uni.setStorageSync('phone','')
						uni.setStorageSync('appid','')
					}
				}
			})
		},
		myclass() {
			uni.reLaunch({url : '/pages/class/class'})
		},
		connectus(){
			this.connectShow = !this.connectShow
		},
		aboutus(){
			uni.navigateTo({url: '/pages/user/aboutus'})
		},
		xieyi(){
			uni.navigateTo({url: '/pages/user/xieyi'})
		},
		login(){
			uni.navigateTo({url: '/pages/login/index'})
		},
		userxieyi(){
			uni.navigateTo({url: '/pages/user/notice'})
		},
		tiku(){
			uni.navigateTo({url: '/pages/question/question'})
		},
		kfInfos(){
			var appid = uni.getStorageSync('appid')
			uni.request({
				url: this.baseURL + '/api/index/getConect',
				method: 'GET',
				data: {appid:appid},
				header: { 'Content-Type': 'application/json' },
				success: (res) => {
					console.log(res.data)
					  this.kfInfo.jw     = res.data.tel
					  this.kfInfo.ts     = res.data.ts
					  this.kfInfo.wechat = res.data.wechat
					  this.kfInfo.text   = res.data.text
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			})
		},
		tabbarClick(item){
			if( item == 1 ){
				uni.reLaunch({url: '/pages/index/index'})
			} else if( item == 2 ){
				uni.reLaunch({url: '/pages/class/class'})
			} else if( item == 3 ){
				uni.reLaunch({url: '/pages/dynamics/dynamics'})
			} else if( item == 4 ){
				uni.reLaunch({url: '/pages/user/user'})
			}
		}
	}
}
</script>

<style scoped>
	.container{background: #fff;}
	.user-header {display: flex;align-items: center;padding: 20rpx;flex-direction: row;background-color: #fff;margin: 10rpx auto;background: #fff;width: 690rpx;margin: 0 auto;border-radius: 10rpx;justify-content: space-between;}
	.avatar {width: 120rpx;height: 120rpx;border-radius: 120rpx;}
	.user-info {flex: 1;margin-left: 10rpx;height: 120rpx;display: flex;flex-direction: column;justify-content: space-around;}
	.userlevel{width: 150rpx;height: 50rpx;background: url(/static/usertag.png);background-size: 100% 100%;text-align: center;color: #fff;font-size: 28rpx;line-height: 50rpx;}
	.userlevel .texts{font-size: 24rpx;}
	.phone {font-size: 30rpx;color: #333;}
	.badge {width: 140rpx;height: 40rpx;}
	.logout {color: #666;font-size: 32rpx;background: #FDF5E8;padding: 20rpx;border-radius: 10rpx;margin-right: 10rpx;}
	.notice-bar {background-color: #fff;padding: 10rpx;border-radius: 10rpx;margin: 20rpx auto;text-align: center;width: 690rpx;background: #FDF5E8;}
	.notice-text {color: #EB6E30;font-size: 28rpx;letter-spacing: 2rpx;}
	.menu-list {background-color: #fff;border-radius: 10rpx;overflow: hidden;width: 690rpx;margin: 0 auto;}
	.menu-item {display: flex;align-items: center;flex-direction: row;margin-top: 30rpx;border-bottom: 1rpx solid #f5f5f5;padding-bottom: 30rpx;}
	.left-icon{width: 45rpx;height: 45rpx;display: inline-block;margin-left: 20rpx;}
	.left-icon image{width: 100%;height: 100%;}
	.rights{width: 20rpx;height: 30rpx;display: inline-block;margin-right: 20rpx;}
	.left-icon image{width: 100%;height: 100%;}
	.menu-text {flex: 1;margin-left: 20rpx;color: #333;font-size: 28rpx;}
	.footer {width: 690rpx;text-align: center;font-size: 26rpx;color: #EB6E30;left: 0;flex-direction: row;justify-content: center;margin-top: 40rpx;}
	.divider {margin: 0 15rpx;}
	.kfview{width: 100%;height: 100%;position: fixed;top: 0;left: 0;}
	.kfview .modal{width: 100%;height: 100%;background: #000;opacity: .6;}
	.kfview .kfs{width: 80%;height: 45%;background: #fff;border-radius: 10rpx;position: absolute;left: 10%;top: 23%;}
	.kfs .kftitle{width: 100%;text-align: center;font-size: 42rpx;padding-top: 30rpx;color: #19191A;font-weight: bold;}
	.kfs .kf-qrcode{width: 260rpx;height: 260rpx;margin: 50rpx auto;}
	.kfs .kf-qrcode image{width: 100%;height: 100%;}
	.kfs .kftel,.times{display: flex;flex-direction: row;font-size: 28rpx;width: 100%;justify-content: center;color: #19191A;margin-top: 10rpx;}
	.kfs .times{color: #949699!important;}
	.kfview .kfclose{width: 100%;height: 60rpx;text-align: center;position: absolute;bottom: 25%;}
	.kfclose image{width: 60rpx; height: 60rpx;display: inline-block;margin: 0 auto;}
	.icon {width: 50rpx;height: 50rpx;}
	.tabbars{ margin-top: 20rpx;display: flex;flex-direction: row;justify-content: space-around;width: 100%;padding-bottom: 20rpx; }
</style>